import React, { useEffect, useState } from 'react';
import { userCount, orderCount, productCount, taskCount } from '@/pages/statistic/service';
import { StatisticCard } from '@ant-design/pro-card';
import { RingProgress } from '@ant-design/charts';
import './Welcome.less';
import moment from 'moment';
import 'moment/locale/zh-cn';
// moment.locale('zh-cn');

const userMap = [
    { lable: '累计注册数(人)', value: 'total' },
    { lable: '本月注册数(人)', value: 'thisMonth' },
    { lable: '本周注册数(人)', value: 'thisWeek' },
    { lable: '昨日注册数(人)', value: 'yesterday' },
];

const Welcome: React.FC = () => {
    const [userData, setUserData] = useState({});

    useEffect(() => {

        userCount({ thisMonth: {}, thisWeek: {}, yesterday: {}, }).then((res: any) => {

            setUserData(res);
        });
    }, []);

    return <>
        <div className={'row'}>
            {
                userMap.map((item: any) => {
                    return (
                        <StatisticCard
                            key={item.value}
                            title={item.lable}
                            statistic={{
                                value: userData[item.value],
                                style: { fontSize: 20 }
                            }}
                        // chart={<div>图表</div>}
                        />
                    );
                })
            }
        </div>

        {/* <div className={'row'}>
            {
                orderMap.map((item: any) => {
                    return (
                        <StatisticCard
                            key={item.value}
                            title={item.lable}
                            statistic={{
                                value: orderData[item.value]?.total,
                                style: { fontSize: 20 }
                            }}
                            chart={
                                <>
                                    <div className={'outer'}>
                                        <div className={'inner'}>
                                            <div className={'innerInner'}>
                                                <div className={'oneLeft2'} />
                                                <span className={'innerRight'}>交易金额</span>
                                            </div>
                                            <span className={'two'}>{orderData[item.value]?.amount || 0}</span>

                                            <div className={'innerInner'}>
                                                <div className={'twoLeft'} />
                                                <span className={'innerRight'}>交易积分</span>
                                            </div>
                                            <span className={'two'}>{orderData[item.value]?.integral || 0}</span>
                                        </div>
                                    </div>
                                </>
                            }
                        />
                    );
                })
            }
        </div> */}
    </>;
};

export default Welcome;
